import {Slider, Row, Col, Button, Popover} from 'antd';
import ReactPlayer from "react-player";
import MusicPlayList from "../../page/musicPlayList/index";
import {second2time} from "../../common/utils/datetimeUtils";

import './index.css';
import {
    CaretLeftOutlined,
    CaretRightOutlined, PauseCircleOutlined,
    PlayCircleOutlined,
    RetweetOutlined, SoundOutlined,
    UnorderedListOutlined
} from "@ant-design/icons";
import React, {
    useState,
    useEffect,
    useRef
} from 'react'


const Audio=(props)=> {


    //播放列表
    //const [musicList,setmusicList] = React.useState(props.musicList);
    const musicList = props.musicList;
   // console.log("Audio:"+JSON.stringify(musicList));
    //播放第几首
    let [musicNum, setMusicNum] = useState(0);
    //音乐url
    //let [musicUrl, setMusicUrl] = React.useState("");
    let [musicDetail,setMusicDetail] = useState({});
    //控制播放与暂停
    let [playing, setPlaying] = useState(false);
    //控制播放与暂停的图标
    let [playerIcon, setPlayerIcon] = useState();
    //音乐总时长
    let [duration, setDuration] = useState(0);
    //音乐播放时长
    let [played, setPlayed] = useState(0);
    //音乐音量
    let [volume, setVolume] = useState(80);
    //是否静音
    let [muted, setMuted] = useState(false);
    //ref
    const player = useRef(null);

    //定时器
    let [playInterval, setPlayInterval] = useState();

    let playStart = () => setPlayInterval(setInterval(() => setPlayed(played => played + 1), 1000))
    let playStop = () => clearInterval(playInterval)

    //渲染结束空置判定
    useEffect(()=>{
        if(musicList.length!==0)
            //setMusicUrl(musicList[musicNum].url)
            setMusicDetail(musicList[musicNum]);
    },[]);

    //控制播放与暂停
    useEffect(() => {
        if (playing) {
            playStart();
            setPlayerIcon(<PauseCircleOutlined/>);
        } else {
            playStop();
            setPlayerIcon(<PlayCircleOutlined/>);
        }
    }, [playing]);


    //当NUM变化的时候修改播放音乐的url
    useEffect(() => {
        if(musicList.length!==0){
            setMusicDetail(musicList[musicNum]);
        }
    }, [musicNum]);

    //当播放列表变化时候，改变url的初值
    useEffect(()=>{
        if(musicList.length!==0)
            setMusicDetail(musicList[0]);
    },[musicList])

    //控制播放时长不溢出
    useEffect(()=> {
        if (playing) {
            if (played >= duration) {
                playStop();
                setPlayed(0);
                setMusicNum(musicNum + 1);
                playStart();
            }
        }
    },[played])

    //获取播放时间
    const getDuration = (duration) => setDuration(duration);

    //上一曲
    const doPreviousMusic = () => {
        setPlayed(0);
        if (musicNum === 0) {
            setMusicNum(musicList.length - 1);
        } else if (musicNum !== 0) {
            setMusicNum(musicNum - 1);
        }
    }
    //下一曲
    const doNextMusic = () => {
        setPlayed(0);
        if (musicNum === musicList.length - 1) {
            setMusicNum(0);
        } else if (musicNum !== musicList.length - 1) {
            setMusicNum(musicNum + 1);
        }
    }
    //调节音量
    const changeVolume = (volume) => setVolume(volume)
    //调节播放条
    const changePlayedSlider = (playSlider) => {
        playStop();
        setPlayed(duration * (playSlider / 100));
        player.current.seekTo(Number(played), 'seconds');
        playStart();
    }

    return (
        <div>
            <ReactPlayer
                ref={player}
                url={musicDetail.url}
                playing={playing}
                style={{display: "none"}}
                muted={muted}
                volume={volume / 100}
                onDuration={getDuration}
            />
            <Row justify='space-between' align='middle'>
                <Col xxl={4} xl={3} lg={3} md={4} sm={6} xm={7}>
                    <Row>
                        <Col span={8}>
                            <Button shape='circle' onClick={doPreviousMusic} icon={<CaretLeftOutlined/>}/>
                        </Col>
                        <Col span={8}>
                            <Button shape='circle' onClick={() => setPlaying(!playing)} icon={playerIcon}/>
                        </Col>
                        <Col span={8}>
                            <Button shape='circle' onClick={doNextMusic} icon={<CaretRightOutlined/>}/>
                        </Col>
                    </Row>
                </Col>

                <Col xxl={16} xl={18} lg={18} md={16} sm={12} xm={10}>

                    <Row justify='space-around' align='middle'>
                        <Col className='text-right' span={2}>
                            {second2time(played.toFixed(0))}
                        </Col>
                        <Col span={20}>
                            <Row justify='space-around' align='middle'>

                                <Col span={24}>
                                    {musicDetail.name}-{musicDetail.artist}
                                </Col>

                            </Row>
                            <Slider defaultValue={0} value={(played / duration) * 100} step={0.1} tooltipVisible={false}
                                    onChange={changePlayedSlider}/>
                        </Col>
                        <Col className='text-left' span={2}>
                            {second2time(duration.toFixed(0))}
                        </Col>
                    </Row>
                </Col>

                <Col xxl={4} xl={3} lg={3} md={4} sm={6} xm={7}>
                    <Row justify='space-around' align='middle' type='flex'>
                        <Col span={8}>
                            <Popover content={<Slider style={{height: "100px"}} vertical defaultValue={volume} min={0}
                                                      max={100} step={1} onChange={changeVolume}/>}>
                                <Button shape='circle' onClick={() => setMuted(!muted)} icon={<SoundOutlined/>}/>
                            </Popover>
                        </Col>

                        <Col span={8}>
                            <Button shape='circle' icon={<RetweetOutlined/>} onClick={() => alert("切换")}/>
                        </Col>

                        <Col span={8}>
                            <Popover content={<MusicPlayList/>} trigger="click" placement="topRight">
                                <Button shape='circle' icon={<UnorderedListOutlined/>}/>
                            </Popover>
                        </Col>
                    </Row>
                </Col>
            </Row>
        </div>
    )


}

export default Audio
